<template>
  <div>
    <HETTable1
      ref="accessControlTable"
      :tableData="data.tableData"
      :tHead="data.tHead"
      :total="data.total"
      :headerOperation="data.headerOperation"
      @getTableData="initTable"
    >
      <template #operation>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="del(scope.row)">删除</el-button>
            <el-button @click="view(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </template>
    </HETTable1>
    <el-dialog
      v-model="dialog.visible"
      :center="true"
      :title="dialog.title"
      width="668px"
      @close="closeDialog"
    >
      <div>
        <p class="tips">
          强制访问控制:可以对主体和客体进行设置，依据标识、安全策略严格控制主体对客体的操作。通过细粒度的安全模型来对主机进行加固操作，避免主机遭受到病毒及恶意操作。
        </p>
        <el-form
          ref="formRef"
          :model="ruleForm"
          :rules="formRules"
          class="demo-form-inline"
        >
          <el-form-item label="规则名称" prop="controlName">
            <el-input v-model="ruleForm.controlName" />
          </el-form-item>
          <el-form-item label="机器名称" prop="guardName">
            <el-input v-model="ruleForm.guardName" />
          </el-form-item>
          <el-form-item
            label="高级主体"
            style="display: block; margin-bottom: 5px !important"
          >
            <span class="m-label">允许访问客体敏感标识</span>
            <el-checkbox v-model="ruleForm.itemList[0].controlAccessHigh">高</el-checkbox>
            <el-checkbox v-model="ruleForm.itemList[0].controlAccessMiddle"
              >中</el-checkbox
            >
            <el-checkbox v-model="ruleForm.itemList[0].controlAccessLow">低</el-checkbox>
          </el-form-item>
          <el-form-item
            label="中级主体"
            style="display: block; margin-bottom: 5px !important"
          >
            <span class="m-label">允许访问客体敏感标识</span>
            <el-checkbox v-model="ruleForm.itemList[1].controlAccessHigh">高</el-checkbox>
            <el-checkbox v-model="ruleForm.itemList[1].controlAccessMiddle"
              >中</el-checkbox
            >
            <el-checkbox v-model="ruleForm.itemList[1].controlAccessLow">低</el-checkbox>
          </el-form-item>
          <el-form-item
            label="低级主体"
            style="display: block; margin-bottom: 5px !important"
          >
            <span class="m-label">允许访问客体敏感标识</span>
            <el-checkbox v-model="ruleForm.itemList[2].controlAccessHigh">高</el-checkbox>
            <el-checkbox v-model="ruleForm.itemList[2].controlAccessMiddle"
              >中</el-checkbox
            >
            <el-checkbox v-model="ruleForm.itemList[2].controlAccessLow">低</el-checkbox>
          </el-form-item>
        </el-form>
        <div class="img-content">
          <img src="../../../assets/images/allowCL.png" alt="" />
        </div>
      </div>
      <template #footer v-if="dialog.title == '设置强访问规则'">
        <div class="dialog-footer">
          <el-button type="primary" @click="submitConfirm(formRef)"> 确定 </el-button>
          <el-button @click="dialog.visible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, markRaw } from "vue";
import {
  req_getAccessControlList,
  req_addAccessControl,
  req_getAccessControlDetail,
  req_delAccessRule,
} from "~/utils/axios/index.js";
import { Lock, Close, Check, DocumentCopy, Upload, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
const accessControlTable = ref();
const formRef = ref();
const dialog = reactive({
  visible: false,
  title: "设置强访问规则",
});
const ruleForm = reactive({
  controlName: "",
  guardName: "",
  itemList: [
    {
      controlCode: "HIGH",
      controlAccessHigh: true,
      controlAccessMiddle: true,
      controlAccessLow: true,
    },
    {
      controlCode: "MIDDLE",
      controlAccessHigh: true,
      controlAccessMiddle: true,
      controlAccessLow: true,
    },
    {
      controlCode: "LOW",
      controlAccessHigh: true,
      controlAccessMiddle: true,
      controlAccessLow: true,
    },
  ],
});
const formRules = ref({
  controlName: [{ required: true, message: "请输入规则名称", trigger: "blur" }],
  guardName: [{ required: true, message: "请输入机器名称", trigger: "blur" }],
});
const data = reactive({
  tHead: [
    {
      label: "规则名称",
      prop: "controlName",
      isCustom: false,
    },
    {
      label: "机器名称",
      prop: "guardName",
      isCustom: false,
    },
    {
      label: "描述",
      prop: "desc",
      isCustom: false,
    },
    {
      label: "操作",
      prop: "operation",
      isCustom: true,
      slotName: "operation",
    },
  ],
  tableData: [],
  total: null,
  headerOperation: [
    {
      name: "新增",
      icon: markRaw(Plus),
      handleClick: () => {
        dialog.title = "设置强访问规则";
        ruleForm.controlName = "";
        ruleForm.guardName = "";
        ruleForm.itemList = [
          {
            controlCode: "HIGH",
            controlAccessHigh: true,
            controlAccessMiddle: true,
            controlAccessLow: true,
          },
          {
            controlCode: "MIDDLE",
            controlAccessHigh: true,
            controlAccessMiddle: true,
            controlAccessLow: true,
          },
          {
            controlCode: "LOW",
            controlAccessHigh: true,
            controlAccessMiddle: true,
            controlAccessLow: true,
          },
        ];
        dialog.visible = true;
      },
    },
  ],
});
const del = (row) => {
  ElMessageBox.confirm("确定要删除该条规则？", "删除强访问控制", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    center: true,
    closeOnClickModal: false,
  }).then(() => {
    req_delAccessRule({ id: row.id }).then((res) => {
      res.data.succeed ? ElMessage.success("删除成功") : ElMessage.error("删除失败");
      accessControlTable.value.getTableData();
    });
  });
};
const view = (row) => {
  req_getAccessControlDetail({ id: row.id }).then((res) => {
    dialog.title = "规则详情";
    if (res.data) {
      Object.keys(ruleForm).forEach((key) => {
        ruleForm[key] = res.data[key];
      });
    }
    dialog.visible = true;
  });
};
const submitConfirm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      req_addAccessControl(ruleForm).then((res) => {
        res.data.succeed ? ElMessage.success("设置成功") : ElMessage.error("设置失败");
        dialog.visible = false;
        accessControlTable.value.getTableData();
      });
    }
  });
};
const closeDialog = () => {
  formRef.value.clearValidate();
};
const initTable = async (initTableParams) => {
  try {
    accessControlTable.value.loading();
    const { data: res } = await req_getAccessControlList(initTableParams);
    accessControlTable.value.finish();
    data.tableData = res.data;
    data.total = res.total;
  } catch (err) {
    accessControlTable.value.finish();
  }
};
</script>

<style lang="scss" scoped>
.tips {
  width: 608px;
  font-size: 14px;
  color: #333;
  margin: 0 auto;
  padding: 10px 15px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #e1e1e1;
  margin-bottom: 20px;
}
:deep(.el-form) {
  padding: 0 40px;
}
.m-label {
  margin: 0 10px 0 30px;
}
.img-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 608px;
  height: 204px;
  margin: 30px auto 0;
  background: #fafafa;
  border: 1px solid #e1e1e1;
  img {
    width: 550px;
  }
}
</style>
